<template>
  <div id="app">
    <RouterView />
    <!-- 使用 Vuestic 模态弹窗 -->
    <VaModal v-model="showModal" size="small" mobile-fullscreen close-button stateful hide-default-actions>
      <h1 class="mb-4 va-h5">有项目申请在本机训练</h1>
      <div v-for="(log, index) in logMessages" :key="index" style="color: #888; padding-left: 15px">
        {{ log }}
      </div>
      <VaButton @click="confirmDataSource">确认</VaButton>
    </VaModal>
    <ChatBox />
    <!-- hhh -->
  </div>
</template>

<script>
import { useLoggerStore } from '@/stores/logger' // 假设这是你的Pinia store路径
import ChatBox from './pages/a_ChatBox/ChatBox.vue'
export default {
  components: {
    ChatBox,
  },
  data() {
    return {
      showModal: false,
      loggerStore: useLoggerStore(),
    }
  },
  computed: {
    logMessages() {
      return this.loggerStore.logs
    },
  },
  mounted() {
    this.$socket.on('data_source_query', (data) => {
      this.showModal = true
      // 处理接收到的数据
    })
    this.$socket.on('output', (data) => {
      this.loggerStore.addLog(data.output)
    })
    this.$socket.on('connect', () => {
      // console.log('11111连接到3001.')
      // 现在可以安全地发送事件
      // this.$socket.emit('data_source_result', { my: 'data' })
    })
    this.$socket.on('connect', () => {
      // console.log('2222连接到3001.')
      // 现在可以安全地发送事件
      // this.$socket.emit('data_source_result', { my: 'data' })
    })
  },
  beforeUnmount() {
    // 在组件卸载前移除监听器，避免内存泄漏
    this.$socket.off('data_source_query')
    this.$socket.off('output')
  },
  methods: {
    confirmDataSource() {
      // console.log('点击按钮')
      // console.log(this.$socket)
      // this.$socket.emit('data_source_result', { result: 'success' })
      // this.$socket.on('connect', () => {
      //   // console.log('2222连接到3001.')
      //   // 现在可以安全地发送事件
      //   this.$socket.emit('data_source_result', { result: 'success' })
      // })
      if (this.$socket.connected) {
        // console.log('连接已经打开，可以安全地发送事件')
        this.$socket.emit('result', { result: 'success' })
      } else {
        // console.log('连接未打开，无法发送事件')
      }

      // console.log('发送确认')
      this.showModal = false // 关闭模态框
    },
  },
}
</script>
<style lang="scss">
@import 'scss/main.scss';

#app {
  font-family: 'Inter', Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 20rem;
}
</style>
